<!-- 专题视频卡片 -->
<template>
    <div id="thematicVideo" v-if="data.id" @click="goHuajuan">
        <div
            class="titleImg"
            :style="{
                background: `url(${data.ad_image}) no-repeat`,
                'background-size': '100% 100%'
            }"
        ></div>
        <div class="content">
            <div
                class="videoItem"
                :style="{
                    background: `url(${data.video_info.image_url}) no-repeat`,
                    'background-size': 'cover'
                }"
            ></div>
            <div
                class="goodsItem"
                v-for="(item, index) in data.goods_list"
                :key="index"
            >
                <div
                    class="goodsImage"
                    :style="{
                        background: `url(${item.goods_image}) no-repeat`,
                        'background-size': 'cover'
                    }"
                ></div>
                <div class="goodsInfo">
                    <span>&yen;{{ item.goods_price }}</span>
                    <label v-if="+item.goods_hj_price"
                        >&yen;{{ item.goods_hj_price }}</label
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "thematicVideo",
    data() {
        return {};
    },
    props: ["data"],
    methods: {
        goHuajuan() {
            window.location.href =
                "https://m.huajuanmall.com/huajuan_h5/#/home";
        }
    }
};
</script>

<style scoped lang="stylus">
#thematicVideo {
    width: 670px;
    height: 770px;
    margin: 0 auto 40px;
    box-shadow: 0 0.2rem 0.6rem 0 rgba(19, 19, 20, 0.16);
    border-radius: 40px;
    overflow: hidden;
}

.titleImg {
    width: 100%;
    height: 300px;
    display: block;
}

.content {
    position: relative;
    margin: 14px 0 0 0;
}

.videoItem {
    width: 423px;
    height: 204px;
    float: left;
    margin: 0 0 0 14px;
    position: relative;
}

.goodsItem {
    width: 204px;
    height: 204px;
    float: left;
    margin: 0 0 14px 14px;
    position: relative;
    background: rgba(0, 0, 0, 0.04);
}

.goodsImage {
    width: 100%;
    height: 100%;
}

.goodsInfo {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 40px;
}

.goodsInfo span {
    color: #62b587;
}

.goodsInfo label {
    text-decoration: line-through;
    color: #959595;
    margin-left: 10px;
}
</style>